<script lang="ts" setup>
import type { VxeGridListeners, VxeGridProps } from "vxe-table";
import { ElMessage } from "element-plus";
import { allLpList } from "@fl/api/flagship/flagship";
import { reactive } from "vue";

const route = useRoute();
const projectIds = ref<any>([]);
const gridOptions = reactive<VxeGridProps>({
  border: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: "", type: "checkbox", width: "60" },
    { field: "ghxmmc", title: "楼盘名称" },
    { field: "company", title: "开发企业" },
    { field: "buildsCount", title: "楼栋数" },
    { field: "huCount", title: "户数" },
    { field: "address", title: "楼盘地址" },
    { field: "hxtCount", title: "户型图数量" },
    // { slots: { default: 'operate' }, title: '操作', width: 160 },
  ],
  data: [],
  editConfig: {
    mode: "row",
    showStatus: true,
    trigger: "manual",
  },
  height: 530,
  keepSource: true,
  loading: false,
  pagerConfig: {
    currentPage: 1,
    enabled: true,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100, 200, 500],
    total: 100,
  },
  showOverflow: true,
});
// 分页器操作
const gridEvents: VxeGridListeners = {
  pageChange({ currentPage, pageSize }) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage;
      gridOptions.pagerConfig.pageSize = pageSize;
    }

    getTableList();
  },
};
const columns = [
  {
    colProps: {
      span: 10,
    },
    label: "楼盘名称",
    prop: "ghxmmc",
    // renderField: (_, onChange) => {
    //   return h(ElInput, {
    //     onChange,
    //     onKeydown: (event: any) => {
    //       if (event.key === "Enter") {
    //         event.preventDefault();
    //       }
    //     },
    //   });
    // },
    valueType: "copy",
  },
];
const state = ref<{ ghxmmc?: string }>({
  ghxmmc: "",
});
// 查询重置
function searchchange(key) {
  console.log(state.value);
  
  if (!key) {
    // 重置
    state.value.ghxmmc = "";
  }
  if (gridOptions.pagerConfig) {
    gridOptions.pagerConfig.currentPage = 1;
    gridOptions.pagerConfig.pageSize = 10;
  }

  getTableList();
}
function selectAllChangeEvent(val) {
  projectIds.value = [];
  val.records.forEach((element) => {
    projectIds.value.push(element.projectId);
  });
}
function selectChangeEvent(val) {
  projectIds.value = [];
  val.records.forEach((element) => {
    projectIds.value.push(element.projectId);
  });
}
function getTableList() {
  gridOptions.loading = true;
  if (state.value.ghxmmc?.length < 200) {
    const options: any = {
      // ...state.value,
      ghxmmc: state.value.ghxmmc.replace(/[\[\]]/g, ""),
      pageNum: gridOptions.pagerConfig.currentPage,
      pageSize: gridOptions.pagerConfig.pageSize,
    };
    console.log(options);

    if (route.query.id) {
      options.shopId = route.query.id;
    }
    allLpList(options)
      .then((res) => {
        gridOptions.loading = false;
        gridOptions.data = res.rows;
        gridOptions.pagerConfig.total = res.total;
      })
      .catch(() => {
        gridOptions.loading = false;
      });
  } else {
    ElMessage.warning("楼盘名称过长！");
  }
}
defineExpose({
  projectIds,
});
onMounted(() => {
  getTableList();
});
</script>

<template>
  <div class="p-10 mb-10 bg-white flex">
    <div class="pr-24 flex-1">
      <PlusForm
        v-model="state"
        :columns="columns"
        :row-props="{ gutter: 20 }"
        label-width=""
        :has-footer="false"
        prevent
        @keyup.enter="searchchange(1)"
      />
    </div>

    <div>
      <ElButton type="primary" @click.prevent="searchchange(1)"> 搜索 </ElButton>

      <ElButton @click.prevent="searchchange(0)"> 重置 </ElButton>
    </div>
  </div>

  <vxe-grid
    v-bind="gridOptions"
    v-on="gridEvents"
    @checkbox-all="selectAllChangeEvent"
    @checkbox-change="selectChangeEvent"
  >
    <template #default="{ row, $rowIndex }">
      <div>{{ $rowIndex + 1 }}. {{ row.realName }}</div>
    </template>
  </vxe-grid>
</template>
